// useMemo
// 缓存: 消耗非常大的计算
// 作用：它在每次重新渲染的时候能够缓存计算的结果
// 优化点：减少没必要的重复计算，提升性能

import { useMemo, useState } from "react"

// 计算斐波那契数列之和
function fib (n) {
  console.log('计算函数执行了')
  if (n < 3)
    return 1
  return fib(n - 2) + fib(n - 1)
}

function App02 () {
  const [count1, setCount1] = useState(0)

  // 使用了useMemo后会缓存上一次的计算结果，
  // 依赖数据count1没有发生变化时，不会触发再次计算，计算的结果仍然是上一次计算的缓存结果
  // 只有依赖数据count1发生改变时，才会重新触发计算执行得到新的计算结果，并缓存
  // 好处是节省没必要的重复计算，提升性能
  const result = useMemo(() => {
    // 返回计算得到的结果
    return fib(count1)
  }, [count1])

  // 直接调用fib(count1)，只要App组件发生渲染就会计算，其它状态变量变化（如：count2）也会触发组件重新渲染，导致count1没有变化也会触发重复计算
  // const result = fib(count1)

  const [count2, setCount2] = useState(0)

  console.log('组件重新渲染了')
  return (
    <div className="App">
      使用count1变量值计算斐波那契数列之和<br/>
      <br/>计算结果：{result} <br/><br/>
      <button onClick={() => setCount1(count1 + 1)}>更改 count1: {count1}</button>
      <button onClick={() => setCount2(count2 + 1)}>更改 count2: {count2}</button>
    </div>
  )
}

export default App02
